<template>
  <div class="content">
    <!--<headers title="银行卡管理"></headers>-->
    <div class="card">
      <ul>
        <li v-for="(item, index) in bank">
          <div class="top">
            <img :src="item.image" alt="">
            <div class="bank">
              <b>{{item.name}}</b>
              <p>{{item.type}}</p>
              <span>{{item.number | getNum}}</span>
            </div>
          </div>
          <div class="bottom">
            <div class="select" @click="selected(index)">
              <i :class="curId===index?'selected':''"></i>
              <b :class="curId===index?'red':''">设为默认</b>
            </div>
            <div class="operate">
              <div ><img src="../assets/images/ico_bianji@1x.png" alt="" @click="edit(index)">编辑</div>
              <div class="right" @click="remove(index)"><img src="../assets/images/ico_shanchu@1x.png" alt="">删除</div>
            </div>
          </div>
        </li>
      </ul>
      <div class="btn">
        <a href="javascript:;" class="btn-next" @click="NewCard">添加新银行卡</a>
      </div>
    </div>
  </div>

</template>

<script>
  /* eslint-disable semi */
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  export default {
    name: '',
    data () {
      return {
        bank: [
          {
            name: '兴业银行',
            type: '储蓄卡',
            image: './src/assets/images/home/logo.png',
            number: '6227000000005518'
          },
          {
            name: '中国工商银行',
            type: '储蓄卡',
            image: './src/assets/images/home/logo.png',
            number: '6227000000005518'
          }
        ],
        select: 'selected',
        curId: 0
      }
    },
    methods: {
      selected (index) {
//        this.curId = index;
        // 置顶默认地址
        this.bank.unshift(this.bank.splice(index, 1)[0]);
//        console.log(this.bank)
      },
      edit (index) {
        console.log(index)
//        console.log(this.bank[index])
        this.$router.push({name: 'cardEdit',
          params: {
            name: this.bank[index].name,
            number: this.bank[index].number,
            type: this.bank[index].type,
            index: index
          }
        })
      },
      remove (index) {
        this.bank.splice(index, 1)
      },
      NewCard () {
        this.$router.push({name: 'cardCreate'})
      }
    },
    // 本地过滤器
    filters: {
      getNum (value) {
        let reg = /^(\d{4})\d+(\d{4})$/; // 正则不匹配空格
//        let num = value.replace(reg, '$1 **** **** $2');
//        alert(value)
        return value.replace(reg, '$1 **** **** $2');
      }
    },
    created () {
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
//      console.log(this.$route.params)
      if (this.$route.params.pretermission === true) {
        this.bank.unshift(this.$route.params);
      } else if (this.$route.params.pretermission === false) {
//        console.log(1111111111)
        this.bank.push(this.$route.params);
      }
      // 接收编辑银行卡
//      console.log(this.bank[1])
      this.bank[this.$route.params.index] = this.$route.params;
    },
    beforeDestroy () {
      // 保存默认银行卡
      window.localStorage.pretermission = JSON.stringify(this.bank[this.curId]);
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    height: 100%;
    background: #f4f4f4;
    .card {
      /*padding-top: 110px;*/
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      ul {
        margin-bottom: 120px;
        li {
          background: #ffffff;
          margin-bottom: 20px;
          .top {
            height: 208px;
            box-sizing: border-box;
            padding-top: 46px;
            font-size: 28px;
            color: #3b3b43;
            border-bottom: 1px solid #dcdcdc;
            img{
              width: 70px;
              height: 70px;
              float: left;
              margin:0 30px 0 20px;
            }
            .bank{
              float: left;
              p{
                color: #A9A9A9;
                margin-bottom: 20px;
              }
            }
          }
          .bottom {
            position: relative;
            width: 100%;
            height: 90px;
            .select {
              float: left;
              padding-top: 26px;
              padding-left: 30px;
              b{
                font-weight: 400;
              }
              i{
                vertical-align: middle;
                display: inline-block;
                background: url('../assets/images/ico_2@1x.png') no-repeat;
                background-size: 100% 100%;
                width: 32px;
                height: 32px;
                margin-right: 8px;
              }
              .selected{
                background: url('../assets/images/ico_1@1x.png') no-repeat;
                background-size: 100% 100%;
              }
              .red{color: #ff0000}
            }
            .operate{
              width: 240px;
              height: 90px;
              float: right;
              padding-right: 14px;
              .right{
                padding-left: 42px;
              }
              div{
                float: left;
                padding-top: 26px;
                img{
                  vertical-align: middle;
                  width: 26px;
                  height: 26px;
                  padding-right: 12px;
                }
              }
            }
          }
        }
      }
      .btn{
        width:100%;
        height: 120px;
        text-align: center;
        line-height: 120px;
        background: #f4f4f4;
        position: fixed;
        bottom: 0;
        .btn-next{
          display: inline-block;
          width: 580px;
          height: 74px;
          margin:0;
          border-radius: 35px;
          border: 1px solid #fe3519;
          color: #fe3519;
          text-align: center;
          line-height: 74px;
          font-size: 26px;
        }
      }
    }
  }
</style>
